<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 模块列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" class="handle-del mr10" @click="add">创建模块</el-button>
                <el-input v-model="keyword" placeholder="筛选模块" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-lx-search" @click="query">筛选</el-button>
            </div>
            <el-table style="width:100%" :data="tableData.records" border  :header-cell-style="{background:'#F5F7FA'}" >
              <el-table-column type="index" label="序号" align="center" width="50"/>
              <el-table-column prop="fdName" label="模块名称" sortable width="150"/>
              <el-table-column prop="fdModulePath" label="模块路径" width="150"/>
              <el-table-column prop="fdCreateTime" label="日期" :formatter="dateFormat" width="150"/>
              <el-table-column prop="fdRemark" label="备注"/>
              <el-table-column label="操作" width="400" align="center">
                  <template slot-scope="scope">
                      <el-button type="primary" @click="handleViewTableList(scope.row)">查看</el-button>
                      <el-button @click="handleEdit(scope.row)">编辑</el-button>
                      <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                      <el-button type="success" @click="handleGenerateCode(scope.row)">生成代码</el-button>
                  </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination background @current-change="handleCurrentChange" :page-size="tableData.size" layout="prev, pager, next" :total="tableData.total"/>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog  :visible.sync="addVisible" width="30%">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="模块名称">
                    <el-input class="input" v-model="form.fdName" style="width:92%"></el-input>
                </el-form-item>
                <el-form-item label="模块路径">
                    <el-input class="input" v-model="form.fdModulePath" style="width:92%"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" :rows="4" class="input" style="width:92%" v-model="form.fdRemark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import dateUtil from '@/utils/dateUtils';
export default {
    name: 'codeGenerateList',
    data() {
        return {
            tableData:{
                keyword: '',
                size:0,
                total:0,
                current:1,
                records: []
            },
            form: {
                fdName: '',
                fdModulePath: '',
                fdRemark: '',
                fdId: ''
            },
            keyword: '',
            addVisible:false,
            index:-1,
            id:-1,
        }
    },
    created() {
        this.getData();
    },
    methods: {
        add() {
            this.resetFormData();
            this.addVisible = true;
        },
        save() {
            this.addVisible = false;
            this.$put('/api/code/generate/code_generate_module_info',this.form).then((res) => {
                if(res.status===1){
                    this.$message({
                        message: res.message,
                        type: 'success'
                    });
                    this.getData();
                    this.resetFormData();
                }else{
                    this.$message.error(res.message);
                }
            });
        },
        resetFormData(){
            this.form.fdId = '';
            this.form.fdName = '';
            this.form.fdModulePath = '';
            this.form.fdRemark = '';
        },
        getData() {
            this.$post('/api/code/generate/code_generate_module_info/list',{
                keyword: this.tableData.keyword,
                current: this.tableData.current
            }).then((res) => {
                this.tableData = res.data;
            });
        },
        query(){
            this.tableData.keyword = this.keyword;
            this.getData();
        },
        dateFormat(obj,column){
            return dateUtil.format(obj.fdCreateTime);
        },
        handleViewTableList(row) {
          const param = {
            name: "codeGenerateTable",
            params: {moduleObj:row}
          }
          this.$common.openTag(param);
        },
        handleEdit(row){
            let id = row.fdId;
            this.form.fdName = row.fdName;
            this.form.fdModulePath = row.fdModulePath;
            this.form.fdRemark = row.fdRemark;
            this.form.fdId = row.fdId;
            this.addVisible = true;
        },
        handleDelete(index,row){
            this.$confirm('此操作将删除该条记录,是否继续?').then(() => {
                this.$delete('/api/code/generate/code_generate_module_info',{
                    id:row.fdId
                }).then((res) => {
                    this.tableData.records.splice(index,1)
                    this.$message({type:'success',message:'删除成功!'})
                });
            })
        },
        handleCurrentChange(value){
            this.tableData.current = value;
            this.tableData.keyword = this.keyword;
            this.getData();
        },
        handleGenerateCode(row){
          this.$fetch('/api/code/generate',{
              id:row.fdId
          }).then((res) => {

              this.$message.success('代码生成成功!');
          })
        }
    }
}

</script>

<style scoped>
 @import "~@/assets/css/list.css";
 .input {
  width:350px;
}
</style>
